<template>
  <div class="app-container">
    <button @click="toUpdate">切换数据</button>
    <div id="mountNode" />
  </div>

</template>

<script>
import { init, update } from '@/utils/g6Utils.min.js'
export default {
  name: 'SwimLane',
  data() {
    return {}
  },
  mounted() {
    const data = {
      nodes: [
        {
          shape: 'root',
          id: 'begin',
          name: '开始',
          radius: 15,
          x: 400,
          y: 100,
          parent: 'group1'
        },
        {
          shape: 'node',
          id: 'shenhe1',
          name: '审核',
          status: 'done',
          x: 300,
          y: 100,
          parent: 'group2'
        },
        {
          shape: 'node',
          id: 'shenhe2',
          name: '审核',
          status: 'done',
          x: 200,
          y: 100,
          parent: 'group3'
        },
        {
          shape: 'node',
          id: 'qianshou1',
          name: '签收',
          status: 'done',
          x: 100,
          y: 100,
          parent: 'group4'
        },
        {
          shape: 'node',
          id: 'jianyi',
          name: '建议',
          status: 'done',
          x: 100,
          y: 200,
          parent: 'group4'
        },
        {
          shape: 'node',
          id: 'shenhe3',
          name: '审核',
          status: 'done',
          x: 200,
          y: 200,
          parent: 'group3'
        },
        {
          shape: 'node',
          id: 'xiafa1',
          name: '下发',
          status: 'done',
          x: 200,
          y: 300,
          parent: 'group3'
        },
        {
          shape: 'node',
          id: 'qianshou2',
          name: '签收',
          status: 'done',
          x: 300,
          y: 300,
          parent: 'group2'
        },
        {
          shape: 'node',
          id: 'xiafa2',
          name: '下发',
          status: 'done',
          x: 300,
          y: 400,
          parent: 'group2'
        },
        {
          shape: 'node',
          id: 'qianshou3',
          name: '签收',
          status: 'done',
          x: 400,
          y: 400,
          parent: 'group1'
        },
        {
          shape: 'node',
          id: 'chuzhi',
          name: '处置',
          status: 'timeout',
          animation: 'flicker',
          x: 400,
          y: 500,
          parent: 'group1'
        },
        {
          shape: 'node',
          id: 'shangbao',
          name: '上报',
          status: 'ing',
          animation: 'wave',
          x: 400,
          y: 600,
          parent: 'group1'
        },
        {
          shape: 'node',
          id: 'shenghe4',
          name: '审核',
          status: '',
          x: 200,
          y: 600,
          parent: 'group3'
        },
        {
          shape: 'root',
          id: 'end',
          name: '结束',
          radius: 15,
          x: 100,
          y: 600,
          parent: 'group4'
        }
      ],
      edges: [
        {
          id: 'edge1',
          source: 'begin',
          target: 'shenhe1'
        },
        {
          id: 'edge2',
          source: 'shenhe1',
          target: 'shenhe2'
        },
        {
          id: 'edge3',
          source: 'shenhe2',
          target: 'qianshou1'
        },
        {
          id: 'edge4',
          source: 'qianshou1',
          target: 'jianyi'
        },
        {
          id: 'edge6',
          source: 'shenhe3',
          target: 'xiafa1'
        },
        {
          id: 'edge66',
          source: 'shenhe3',
          target: 'jianyi',
          label: '不通过',
          controlPoints: [
            {
              x: 230,
              y: 150
            },
            {
              x: 130,
              y: 150
            }
          ]
        },
        {
          id: 'edge7',
          source: 'xiafa1',
          target: 'qianshou2'
        },
        {
          id: 'edge8',
          source: 'qianshou2',
          target: 'xiafa2'
        },
        {
          id: 'edge9',
          source: 'xiafa2',
          target: 'qianshou3'
        },
        {
          id: 'edge10',
          source: 'qianshou3',
          target: 'chuzhi'
        },
        {
          id: 'edge11',
          source: 'chuzhi',
          target: 'shangbao',
          label: '完成'
        },
        {
          id: 'edge12',
          source: 'shangbao',
          target: 'shenghe4'
        },
        {
          id: 'edge13',
          source: 'shenghe4',
          target: 'end'
        }
      ],
      groups: [
        {
          shape: 'lane',
          id: 'group4',
          label: '泳道一'
        },
        {
          shape: 'lane',
          id: 'group3',
          label: '泳道二'
        },
        {
          shape: 'lane',
          id: 'group2',
          label: '泳道三'
        },
        {
          shape: 'lane',
          id: 'group1',
          label: '泳道四'
        }
      ],
      guides: [
        {
          id: 'legend',
          shape: 'legend',
          label: [{ shape: 'root', name: '开始/结束' }, { shape: 'node', name: '处置流程' }]
        },
        {
          id: 'states',
          shape: 'states'
        }
      ],
      status: [
        {
          title: 'done',
          color: 'green',
          name: '已完成'
        },
        {
          title: 'timeout',
          color: 'red',
          name: '已超时'
        },
        {
          title: 'ing',
          color: '#EE8262',
          name: '进行中'
        },
        {
          title: 'default',
          color: 'gray',
          name: '未开始'
        }
      ]
    }
    init('mountNode', 1000, 800, data)
  },
  methods: {
    toUpdate() {
      const data = {
        nodes: [
          {
            shape: 'root',
            id: 'begin',
            name: '开始',
            x: 100,
            y: 100
          },
          {
            shape: 'node',
            id: 'shenhe1',
            name: '审核',
            status: 'done',
            x: 200,
            y: 200
          },
          {
            shape: 'node',
            id: 'xiafa',
            name: '下发',
            status: 'done',
            x: 200,
            y: 300
          },
          {
            shape: 'node',
            id: 'qianshou',
            name: '签收',
            status: 'done',
            x: 300,
            y: 300
          },
          {
            shape: 'node',
            id: 'chuzhi',
            name: '处置',
            status: 'timeout',
            x: 300,
            y: 400
          },
          {
            shape: 'node',
            id: 'shangbao',
            name: '上报',
            status: '',
            x: 300,
            y: 500
          },
          {
            shape: 'node',
            id: 'shenhe2',
            name: '审核',
            status: '',
            x: 200,
            y: 500
          },
          {
            shape: 'root',
            id: 'end',
            name: '结束',
            status: '',
            x: 100,
            y: 500
          }
        ],
        edges: [
          {
            id: 'edge1',
            source: 'begin',
            target: 'shenhe1',
            controlPoints: [
              {
                x: 230,
                y: 115
              }
            ]
          },
          {
            id: 'edge2',
            source: 'shenhe1',
            target: 'xiafa'
          },
          {
            id: 'edge3',
            source: 'xiafa',
            target: 'qianshou'
          },
          {
            id: 'edge4',
            source: 'qianshou',
            target: 'chuzhi'
          },
          {
            id: 'edge5',
            source: 'chuzhi',
            target: 'shangbao',
            label: '完成'
          },
          {
            id: 'edge6',
            source: 'shangbao',
            target: 'shenhe2'
          },
          {
            id: 'edge7',
            source: 'shenhe2',
            target: 'end'
          },
          {
            id: 'edge8',
            source: 'shenhe1',
            target: 'begin',
            label: '不通过',
            controlPoints: [
              {
                x: 130,
                y: 215
              }
            ]
          }
        ],
        groups: [
        ],
        guides: [
          {
            id: 'states',
            shape: 'states'
          }
        ],
        status: [
          {
            title: 'default',
            color: 'gray',
            name: '未开始'
          }
        ]
      }
      update(data)
    }
  }
}
</script>

<style scoped>
#mountNode{
  width: 100%;
  height:  100%;
  border:1px saddlebrown solid;
}
</style>
